<template>
  <section class="item-panel">
    <header class="title">组件库</header>
    <div class="search">
      <el-input placeholder="请输入组件名称或描述" v-model="searchKeyword">
        <el-button slot="append" icon="el-icon-search"></el-button>
      </el-input>
    </div>

    <el-tree
      class="item-panel-tree"
      :data="data"
      node-key="id"
      :filter-node-method="filterNode"
      ref="tree"
      @node-drag-start="handleDragStart"
      draggable
      :allow-drop="allowDrop"
      :allow-drag="allowDrag"
    >
      <div class="tree-node-wrapper" slot-scope="{ data }">
        <div style="cursor: pointer;" class="tree-node" v-if="data.children">{{ data.label }}</div>
        <el-popover v-else placement="right" width="360" trigger="hover">
          <div class="popover">
            <div class="popover-title">{{ data.label }}</div>
            <div class="popover-content">这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容</div>
          </div>
          <div style="cursor: pointer;" class="leaf-node" slot="reference">{{ data.label }}</div>
        </el-popover>
      </div>
    </el-tree>
  </section>
</template>

<script>
import EventBus from '../EventBus'
import BusEvents from '../EventBus/events'
import { ModelRect } from '../graph/nodes'
export default {
  data() {
    return {
      searchKeyword: '',
      data: [
        {
          id: '1',
          label: '前端',
          children: [
            {
              id: '1-1',
              label: 'HTML5',
            },
            {
              id: '1-2',
              label: 'CSS3',
            },
            {
              id: '1-3',
              label: 'JavaScript',
            },
          ],
        },
        {
          id: '2-',
          label: '后端',
          children: [
            {
              id: '2-1',
              label: 'Python',
            },
            {
              id: '2-2',
              label: 'Java',
            },
            {
              id: '2-3',
              label: 'PHP',
            },
          ],
        },
      ],
    }
  },
  watch: {
    // 监听searchKeyword变化，同步更新tree
    searchKeyword(val) {
      this.$refs.tree.filter(val)
    },
  },
  methods: {
    // 搜索过滤方法
    filterNode(val, data) {
      if (!val) return true
      return data.label.toLowerCase().indexOf(val.toLowerCase()) !== -1
    },
    handleDragStart(node, e) {
      if (!node.data.children) {
        // todo: 这里需要根据 node.data 的数据生成不同的节点
        let graphNode = new ModelRect({ label: node.data.label })
        EventBus.$emit(BusEvents.ItemDrag, { node: graphNode, e: e })
      }
    },
    // 禁用 el-tree 正常的拖拽
    allowDrop() {
      return false
    },
    allowDrag(draggingNode) {
      return !draggingNode.data.children
    },
  },
}
</script>

<style lang="less">
.item-panel {
  width: 100%;
  height: 100%;
  border-right: 1px solid rgba(0, 0, 0, 0.08);

  display: flex;
  flex-direction: column;

  .title {
    height: 40px;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    color: #1890ff;
    text-align: center;
    font-size: 16px;

    display: flex;
    justify-content: center;
    align-items: center;
  }

  .search {
    box-sizing: border-box;
    margin: 6px 8px;

    .el-input {
      .el-input__inner {
        height: 32px;
        font-size: 12px;
      }
    }
  }

  .item-panel-tree {
    width: auto;
    flex-grow: 1;
    background-image: linear-gradient(#fff 50%, #f7f9fb 0);
    background-size: 100% 60px;
    overflow-y: hidden;
    &:hover {
      overflow-y: scroll;
    }

    .tree-node-wrapper {
      width: 100%;
      height: 100%;

      .el-popover__reference-wrapper {
        display: block;
        height: 100%;
        width: 100%;
      }
      .tree-node {
        font-size: 14px;
        line-height: 30px;
      }
      .leaf-node {
        font-size: 14px;
        line-height: 30px;
      }
    }

    &::-webkit-scrollbar {
      width: 4px;
      height: 4px;
    }
    &::-webkit-scrollbar-thumb {
      border-radius: 2px;
      background: rgba(0, 0, 0, 0.2);
    }
  }
}

// popover的样式
.popover {
  .popover-title {
    height: 24px;
    font-size: 14px;
    font-weight: bolder;
    border-bottom: 1px solid rgba(0, 0, 0, .2);
  }
  .popover-content {
    margin-top: 1em;
  }
}

// 通过渗透的方式，直接修改 .el-tree-node__content 的高度
.el-tree.item-panel-tree.is-dragging .el-tree-node__content {
  height: 30px;
  &:hover {
    background-color: #f5f5f5;
  }
}
// 不旋转
.item-panel .el-tree-node__expand-icon.expanded {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
.item-panel .el-tree-node__expand-icon.el-icon-caret-right::before {
  content: '\e78a';
  font-size: 14px;
}
.item-panel .el-tree-node__expand-icon.el-icon-caret-right.expanded::before {
  content: '\e784';
  font-size: 14px;
}
.item-panel .el-tree-node__expand-icon.el-icon-caret-right.is-leaf:before {
  content: '\e785';
  font-size: 14px;
  color: #c0c4cc;
}
</style>
